<template>
  <div>
    <el-dialog
        v-model="innerVisible"
        :width="isMobile ? '1150' : '60%'"
        title="员工注销"
        append-to-body
        :close-on-click-modal="false"
    >
      <filterComponent v-model:filter-data="filterData" hideHead @doSearch="handleSearch"/>
      <tableComponent class="set-height" :noPagination="true" :table-header="tableHeader" height="400"
                      :table-data="tableData"
      >
        <template #ownIdCardFront>
          <el-table-column label="身份证正面" width="200">
            <template #default="scope">
              <span v-if="!scope.row.ownIdCardFront">--</span>
              <div v-else>
                <bigPicture text="点击查看" :imageUrl="scope.row.ownIdCardFront"/>
              </div>
            </template>
          </el-table-column>
        </template>
        <template #ownIdCardBack>
          <el-table-column label="身份证反面" width="200">
            <template #default="scope">
              <span v-if="!scope.row.ownIdCardBack">--</span>
              <div v-else>
                <bigPicture text="点击查看" :imageUrl="scope.row.ownIdCardBack"/>
              </div>
            </template>
          </el-table-column>
        </template>
        <template #operate>
          <el-table-column fixed="right" label="操作" width="220">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="openuploadtc(scope.row)">上传身份证正反面</el-button>
              <el-button link type="primary" size="small" @click="userlogout(scope.row)">注销</el-button>
            </template>
          </el-table-column>
        </template>
      </tableComponent>
      <el-dialog
          :width="isMobile ? '580' : '30%'"
          v-model="dialogbulletVisible"
          title="上传身份证正反面"
      >
        <div class="uploadtitle"><span class="red">*</span>身份证正面</div>
        <el-upload ref="upload" accept="image/*" action="#" list-type="picture-card" :limit="1" :on-exceed="handleExceed"
                   :on-change="bullpayonChange" :auto-upload="false">
          <el-icon>
            <Plus/>
          </el-icon>
          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" crossorigin="anonymous" :src="file.url" alt=""/>
              <span class="el-upload-list__item-actions">
          <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in/></el-icon>
          </span>
          <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
          >
            <el-icon><Delete/></el-icon>
          </span>
        </span>
            </div>
          </template>
        </el-upload>
        <el-dialog v-model="dialogVisible" :width="isMobile ? '960' : '50%'">
          <img w-full style="width: 100%;" crossorigin="anonymous" :src="dialogImageUrl" alt="Preview Image"/>
        </el-dialog>
        <div class="uploadtitle"><span class="red">*</span>身份证反面</div>
        <el-upload ref="upload1" action="#" accept="image/*" list-type="picture-card" :limit="1" :on-exceed="handleExceed1"
                   :on-change="bullpayonChange1" :auto-upload="false">
          <el-icon>
            <Plus/>
          </el-icon>
          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" crossorigin="anonymous" :src="file.url" alt=""/>
              <span class="el-upload-list__item-actions">
          <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview1(file)"
          >
            <el-icon><zoom-in/></el-icon>
          </span>
          <span
              v-if="!disabled1"
              class="el-upload-list__item-delete"
              @click="handleRemove1(file)"
          >
            <el-icon><Delete/></el-icon>
          </span>
        </span>
            </div>
          </template>
        </el-upload>
        <el-dialog v-model="dialogVisible1" :width="isMobile ? '1150' : '50%'">
          <img w-full style="width: 100%;" crossorigin="anonymous" :src="dialogImageUrl1" alt="Preview Image"/>
        </el-dialog>
        <span
            class="dialog-footer"
            style="display: flex; align-items: center; justify-content: center"
        >
          <el-button
              class="my_cancelbtn"
              @click="cancle"
          >取消</el-button>
          <el-button
              type="primary"
              @click="updateIdCardPhoto"
              class="my_btn"
          >确定</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import bigPicture from '@/components/bigPicture/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import filterComponent from '@/components/filterComponent/index.vue'
import {ref, watch} from 'vue'
import {shake} from '../../utils/utils'
import {getuserlistapi, updateIdCardPhotoapi, userlogoutapi} from '../../api/employeeCancellation'
import {ElMessage, genFileId, UploadFile} from 'element-plus'
import type {UploadInstance, UploadProps, UploadRawFile} from 'element-plus'

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})
const handleExceed1: UploadProps['onExceed'] = (files) => {
  upload1.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload1.value!.handleStart(file)
}

const isMobile = ref((window as any).isMobile)

const bullpayonChange1 = (file: any, fileListVal: any) => {
  const reader = new FileReader()
  reader.onload = (event: any) => {
    const url = event.target.result
    fan.value = url.split('base64,')[1]
  }
  reader.readAsDataURL(file.raw)
}
const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}
const bullpayonChange = (file: any, fileListVal: any) => {
  const reader = new FileReader()
  reader.onload = (event: any) => {
    const url = event.target.result
    zheng.value = url.split('base64,')[1]
  }
  reader.readAsDataURL(file.raw)
}
const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}
const handleRemove1 = (file: UploadFile) => {
  fan.value = ''
  upload1.value!.clearFiles()
}
const handleRemove = (file: UploadFile) => {
  zheng.value = ''
  upload.value!.clearFiles()
}
const handlePictureCardPreview1 = (file: UploadFile) => {
  dialogImageUrl1.value = file.url!
  dialogVisible1.value = true
}
const cancle = () => {
  fan.value = ''
  zheng.value = ''
  dialogbulletVisible.value = false
  upload.value!.clearFiles()
  upload1.value!.clearFiles()
}
const upload = ref<UploadInstance>()
const upload1 = ref<UploadInstance>()
const updateIdCardPhoto = () => {
  if (!zheng.value) {
    ElMessage({
      message: '请选择身份证正面',
      type: 'warning'
    })
    return
  }
  if (!fan.value) {
    ElMessage({
      message: '请选择身份证反面',
      type: 'warning'
    })
    return
  }
  updateIdCardPhotoapi({
    id: id.value,
    ownIdCardFront: zheng.value,
    ownIdCardBack: fan.value
  }).then((res: any) => {
    // console.log(res)
    if (res.code == 200) {
      ElMessage({
        message: '操作成功',
        type: 'success'
      })
      cancle()
      getuserlist()
    }
  })
}
const userlogout = (obj: any) => {
  userlogoutapi(obj).then((res: any) => {
    if (res.code === 200) {
      ElMessage({
        message: '操作成功',
        type: 'success'
      })
      getuserlist()
    }
  })
}
const openuploadtc = (res: any) => {
  dialogbulletVisible.value = true
  zheng.value = ''
  fan.value = ''
  id.value = res.id
}
const dialogImageUrl = ref('')
const dialogImageUrl1 = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
const dialogVisible1 = ref(false)
const disabled1 = ref(false)
const zheng = ref('')
const fan = ref('')
const id = ref<any>(null)
const dialogbulletVisible = ref(false)
const getuserlist = () => {
  getuserlistapi({
    pageNum: 1,
    pageSize: 999999999,
    idCardNo: filterData.value.list.idCardNo.value,
    isDelete: 0,
    phone: filterData.value.list.phone.value
  }).then((res: any) => {
    tableData.value = res.rows
  })
}
const tableHeader = ref([
  {
    label: '员工姓名',
    prop: 'userName',
    width: 100
  },
  {
    label: '手机号',
    prop: 'phone',
    width: 200
  },
  {
    label: '身份证',
    prop: 'idCardNo',
    width: 200
  },
  {
    label: '身份证正面',
    prop: 'ownIdCardFront',
    width: 200
  },
  {
    label: '身份证反面',
    prop: 'ownIdCardBack',
    width: 200
  },
  {
    label: '民族',
    prop: 'nation',
    width: 100
  },
  {
    label: '注册时间',
    prop: 'createTime',
    width: 100
  },
  {
    label: '最后活跃时间',
    prop: 'createTime',
    width: 150
  },
  {
    label: 'openID',
    prop: 'openId',
    width: 200
  },
  {
    label: 'userID',
    prop: 'userId'
  },
  {
    label: '操作',
    prop: 'operate'
  },
])
const tableData = ref([])
const filterData = ref({
  list: {
    idCardNo: {
      name: '员工身份证',
      prop: 'idCardNo',
      value: '',
      placeholder: '请输入员工身份证',
      type: 'input',
      inputType: 'text',
    },
    phone: {
      name: '手机号',
      prop: 'phone',
      value: '',
      placeholder: '请输入员员工手机号',
      type: 'input',
      inputType: 'text',
    }
  },
})
const handleSearch = () => {
  getuserlist()
}
const innerVisible = ref(false)
const emits = defineEmits(['update:show'])
watch(() => props.show, (newval) => {
  innerVisible.value = newval
})
watch(innerVisible, (newval) => {
  emits('update:show', newval)
})
</script>

<style scoped lang="scss">
.red {
  color: red;
}

.uploadtitle {
  font-size: 16px;
  padding-bottom: 10px;
  padding-top: 10px;
}
</style>
